<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            margin: 200px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 50px;
            background-color: #333;
        }
        #animation {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .animation-item {
            margin: 0 2px;
            display: inline-block;
            height: 20px;
            width: 3px;
            background: yellow;
            transition: height 0.4s linear;
        }

    </style>
</head>
<body>
    <div id="demo">
        <div id="animation">
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
            <span class="animation-item"></span>
        </div>
    </div>
    <script>

        var spanList = document.querySelectorAll("#animation>.animation-item")

        var peak = []
        function createRandomPeak (min=10, max=20) {
            var array = []
            while (array.length < 4) {
                r = Math.random()*100
                if (r >= min && r <= max) {
                    array.push(~~r)
                }
            }
            return array  
        }

        setInterval(function() {
            peak = createRandomPeak();
            for (let i = 0; i < peak.length; i++) {
                peak[i]
                spanList[5 * i + 0].style.height = peak[i] - 6 + 'px'
                spanList[5 * i + 1].style.height = peak[i] - 3 + 'px'
                spanList[5 * i + 2].style.height = peak[i] - 0 + 'px'
                spanList[5 * i + 3].style.height = peak[i] - 3 + 'px'
                spanList[5 * i + 4].style.height = peak[i] - 6 + 'px'
            }
        }, 400)

    </script>

</body>
</html>